<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 有时候我们只希望让某些div浮动，而其他的div依旧保持原有的位置，但是元素一旦浮动之后后面那些不浮动的元素会顶上来
        解决思路有两个:

           1. 可以利用浮动元素的上方元素如果不浮动的话,那么浮动的元素无法上移的特性将要浮动的元素放在一个父元素div中包起来
        

           2. 如果当前元素的位置受到他上方元素浮动之后影响,那么可以让当前元素设置clear:both属性 */

         *{
             padding: 0;
             margin: 0;
         }

         .fl{
             width: 400px;
             height: 400px;
             border: 1px solid red;
         }
         .box1,.box2,.box3{
             width: 200px;
             height: 200px;
         }
         .box1{
             background-color: aquamarine;
             float: left;
         }
         .box2{
             background-color: blue;
             float: left;
         }
         .box3{
             background-color: blueviolet;
         }


    </style>
</head>
<body>
    <div class="fl">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    
     <div class="box3"></div>
</body>
</html>